<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="css/main.css" type="text/css" rel="stylesheet"  />
  <script>
    // 当页面加载完成后，为每个数量输入框添加事件监听器
    window.onload = function() {
      const quantityInputs = document.querySelectorAll('input[type="number"]');
      quantityInputs.forEach(input => {
        input.addEventListener('input', updatePrice);
      });
      const deleteButtons = document.querySelectorAll('td[style="color:red"]');
      deleteButtons.forEach(button => {
        button.addEventListener('click', deleteRow);
      });
    }
    // 更新价格的函数
    function updatePrice(event) {
      const input = event.target;
      const row = input.parentNode.parentNode;
      const priceCell = row.querySelector('td:nth-child(5)');
      const quantity = parseInt(input.value);
      // 假设每个商品的单价是 10 元，可根据实际情况修改
      const unitPrice = 10;
      const totalPrice = quantity * unitPrice;
      priceCell.textContent = totalPrice + "元";
      updateTotal();
    }
    // 更新总价的函数
    function updateTotal() {
      const priceCells = document.querySelectorAll('td:nth-child(5)');
      let total = 0;
      priceCells.forEach(priceCell => {
        const priceText = priceCell.textContent;
        const price = parseInt(priceText);
        total += price;
      });
      const totalLabel = document.querySelector('p > label');
      totalLabel.textContent = total + "元";
    }
    // 删除行的函数
    function deleteRow(event) {
      const row = event.target.parentNode.parentNode;
      const table = row.parentNode;
      table.deleteRow(row.rowIndex);
      updateTotal();
    }
  </script>
</head>
<body class="w1200">
<!--banner-->
<div class="banner">
  <div class="logo">
    @ESTORE
  </div>
</div>
<header class="menubox">
  <section class="menubox_bar">
    <nav class="frmenu w1000 flex">
      <section class="li1"><a href="index.html" class="frista cur">首页</a></section>
      <section class="li1"><a href="" class="frista">商城新品 </a></section>
      <section class="li1"><a href="" class="frista">特价商品</a></section>
      <section class="li1"><a href="xiangqing.html" class="frista">购物车</a></section>
      <section class="li1"><a href="Car.html" class="frista">订单查看</a></section>
      <section class="li1"><a href="" class="frista">用户修改</a></section>
    </nav>
  </section>
</header>
<!---->
<!--main-->
<section class="w1200 flex wrap1 ">
  <div class="fl_con">
    <div style="text-align: left; padding: 10px 0; font-size: 20px; font-weight: bold;">在线人数：1</div>
    <div class="commonBlock">
      <div class="til"><em>商品搜索......</em></div>
      <div class="conn">
        <h2>搜索商品:</h2>
        <div class="flex" style="margin: 10px 0;">
          <input  type="text"   placeholder="搜索商品" style="width: 140px; border: 1px solid #ddd; height: 20px; margin-right: 20px;"/><button>搜索</button>
        </div>

      </div>
    </div>

    <div class="commonBlock">
      <div class="til"><em>用户信息......</em></div>
      <div class="conn">
        <div style="line-height:30px;">
          sa登录成功<br/>
          2022年3月15日星期二<br/>
          用户姓名:a
        </div>
        <button style="margin-left:100px">安全退出</button>

      </div>
    </div>
  </div>
  <div class="fr_con">
    <div class="commonBlock">
      <div class="til"><em>@List 查看商品详情......</em></div>
      <div class="boxPro">
        <table class='tableCon'>
          <tr >
            <th>商品图片</th>
            <th>商品名称</th>
            <th>商品描述</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
          <tr >
            <td><img src="images/img2.jpg" style="width: 100px; height: 100px;" /></td>
            <td>爱仕达不锈钢蒸锅JX1528</td>
            <td>15*20 红色</td>
            <td>
              <!-- <button>-</button> -->
              <input type='number' value='10' style="width:60px; height:20px; border:1px solid #ddd" />
              <!-- <button>+</button> -->
            </td>
            <td>100元</td>
            <td style="color:red">删除</td>
          </tr>
          <tr >
            <td><img src="images/img.jpg" style="width: 100px; height: 100px;" /></td>
            <td>爱仕达不锈钢蒸锅JX1528</td>
            <td>15*20 红色</td>
            <td>
              <!-- <button>-</button> -->
              <input type='number' value='10' style="width:60px; height:20px; border:1px solid #ddd" />
              <!-- <button>+</button> -->
            </td>
            <td>100元</td>
            <td style="color:red">删除</td>
          </tr>
          <tr >
            <td><img src="images/img3.jpg" style="width: 100px; height: 100px;" /></td>
            <td>爱仕达不锈钢蒸锅JX1528</td>
            <td>15*20 红色</td>
            <td>
              <!-- <button>-</button> -->
              <input type='number' value='10' style="width:60px; height:20px; border:1px solid #ddd" />
              <!-- <button>+</button> -->
            </td>
            <td>100元</td>
            <td style="color:red">删除</td>
          </tr>
          <tr >
            <td><img src="images/img.jpg" style="width: 100px; height: 100px;" /></td>
            <td>爱仕达不锈钢蒸锅JX1528</td>
            <td>15*20 红色</td>
            <td>
              <!-- <button>-</button> -->
              <input type='number' value='10' style="width:60px; height:20px; border:1px solid #ddd" />
              <!-- <button>+</button> -->
            </td>
            <td>100元</td>
            <td style="color:red">删除</td>
          </tr>
        </table>
        <div style="text-align:right; padding:10px;">
          <p>总价：<label style="color:#CC0001; ">200元</label>        数量：10</p>
          <p style="padding-top:10px;">
            <button href='details.html' class='btn btn2' style="background:red; color:#fff;border:1px solid #CC0001; margin-left:20px;cursor: pointer;">提交订单</button></p>
        </div>
      </div>
    </div>

  </div>
</section>
</body>
</html>